<template>
    <div class="head">
        <div class="head-left">
            <div class="iconfont back-icon">&#xe624;</div>
        </div>
        <div class="head-input">
            <span class="iconfont">&#xe632;</span>输入城市/景点/游玩主题
        </div>
        <div class="head-right">
            城市<span class="iconfont arrow-down">&#xe64a;</span>
        </div>
    </div>
</template>
<style lang="stylus" scoped>
@import "~styles/varible.styl"
.head
  display: flex
  width: 100%
  height: .86rem
  line-height: .86rem
  background: $bgColor
  color: #fff
  .head-left
    width: .64rem
    float: left
    .back-icon
      display:block
      text-align :center
      font-size : .4rem
  .head-input
    flex: 1
    margin-left: .2rem
    margin-top: .12rem
    height: .64rem
    line-height: .64rem
    border-radius: 5px
    text-align :left
    padding-left :.2rem
    background: #fff
    color: #ccc
  .head-right
    width: 1.24rem
    float: right
    text-align:center
    .arrow-down
      font-size :.24rem

</style>
<script>
export default {
  name: 'home-header'
}
</script>
